<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<form id="edit-blog-form">
    <table>
        <tr>
            <td style="width: 100px">标题：</td>
            <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" size="60"
                       value="${blog.title}"/></td>
            <td>
                <input type="hidden" name="id" value="${blog.id}">
            </td>
        </tr>
        <tr>
            <td>分类：</td>
            <td>
                <input class="easyui-combobox" id="edit-blog-category" name="category.id"
                       data-options="valueField:'id',textField:'name',url:'<%=request.getContextPath()%>/blog.html?act=category'">
                <div id="blog-add-category-div" style="display: none">
                    <input type="text" id="blog-add-category"/>
                    <input type="button" value="添加" onclick="doBlogAddCategory()"/> <input type="button" value="取消"
                                                                                           onclick="$('#blog-add-category-div').hide()"/>
                </div>
                <a href="#" class="easyui-linkbutton" iconCls="icon-add"
                   onclick="$('#blog-add-category-div').show()">添加分类</a>
            </td>
        </tr>
        <tr>
            <td>封面图：</td>
            <!--点击这个按钮，调用kingEditor文件上传插件-->
            <td>
                <img src="${blog.cover}" id="blog-cover-img" style="max-height: 200px"/>
                <input type="hidden" id="blog-cover-input" name="cover" value="${blog.cover}"/>
                <a href="javascript:void(0)" class="easyui-linkbutton" id="upload-blog-btn">图片上传</a></td>
        </tr>
        <tr>
            <td>摘要：</td>
            <td><textarea name="summary">${blog.summary}</textarea></td>
        </tr>
        <tr>
            <td>正文：</td>
            <td><textarea name="content" id="editor">${blog.content}</textarea></td>
        </tr>
        <tr>
            <td>关键字：</td>
            <td>
                <ul style="padding-left: 10px;" id="keywords-ul">
                    <c:if test="${not empty blog.keywords}">
                        <c:set value="${fn:split(blog.keywords, ',') }" var="keys"/>
                        <c:forEach items="${keys}" var="key">
                            <li><input type="hidden" value="${key}" name="keywords"/>${key} <a class="fa">x</a></li>
                        </c:forEach>
                    </c:if>
                </ul>
                <input type="text" id="edit-blog-keywords"/>
            </td>
        </tr>
    </table>


    <script type="text/javascript">
        $(function () {
            $(document).on("click", ".fa", function () {
                $(this).parent().remove()
            })
            $("#upload-blog-btn").click(function () {
                KindEditor.editor(kingEditorParams).loadPlugin('image', function () {
                    this.plugin.imageDialog({
                        showRemote: false,
                        clickFn: function (url, title, width, height, border, align) {
                            //移除原来的预览图
                            //增加新的预览图
                            $("#blog-cover-img").attr("src", url);
                            //修改input的值
                            $("#blog-cover-input").val(url);
                            this.hideDialog();//关闭上传框
                        }
                    });
                });
            });
            $("#edit-blog-category").combobox({
                onLoadSuccess: function (data) {
                    $("#edit-blog-category").combobox("setValue", "${blog.category.id}");
                }
            });
            $("#edit-blog-keywords").textbox({
                icons: [{
                    iconCls: 'icon-add',
                    handler: function (e) {
                        var key = $("#edit-blog-keywords").textbox("getValue");
                        if(key.trim().length ==0){
                            return;
                        }
                        $("#keywords-ul").append('<li><input type="hidden" value="' + key + '" name="keywords"/>' + key + ' <a class="fa">x</a></li>')
                        $("#edit-blog-keywords").textbox("setValue", "");
                    }
                }]
            })
        });

        function doBlogAddCategory() {
            $.ajax({
                url: "<%=request.getContextPath()%>/category.html?act=edit",
                data: "name=" + $("#blog-add-category").val(),
                method: "post",
                success: function (data) {
                    if (data.status) {
                        var items = $("#edit-blog-category").combobox("getData");
                        items.push({"id": data.other.id, "name": data.other.name})
                        $("#edit-blog-category").combobox("loadData", items);
                        $("#edit-blog-category").combobox("setValue", data.other.id);
                        $("#blog-add-category").val("");
                        $('#blog-add-category-div').hide();
                    } else {
                        alert(data.message)
                    }
                }
            })
        }
    </script>

</form>
<style type="text/css">
    #keywords-ul li {
        list-style: none;
        display: inline;
        padding-left: 5px;
    }

    .fa:hover {
        font-weight: bolder;
        cursor: pointer;
        color: red;
    }
</style>